<template>
  <div class="pop-up-main">
    <div class="paln-box">
      <div
        ref="bigImage"
        class="movableItem"
        :style="{width:width,height:height}"
        @mousewheel="rollImg($event)"
        @mousedown="drag($event,1)">
        <!-- 图片不可选中 或不可拖拽到新标签打开-->
        <img
          :src="imgvalue"
          oncontextmenu="return false;"
          onselectstart="return false;"
          draggable="false"
          alt>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    picpath: {
      type: String,
      default() {
        return '[]'
      }
    },
    equipment: {
      type: Array,
      default: () => {
        return [
          {
            iconImgUrl: '',
            top: 0,
            left: 0
          }
        ]
      }
    }
  },

  data() {
    return {
      imgvalue: this.picpath,
      // 定时器
      timer: '',
      // 图片加载失败
      imgOnerror: false,
      imgIndex: 0,
      isChange: true,
      // 图片显示默认大小
      width: '100%',
      height: '100%',
      // 可缩小倍数,为空则可无限缩小
      minification: 4,
      // 可放大倍数 为空则可无限放大
      magnification: 8,
      bigMaxWidth: 1600,
      bigMaxHeight: 800,

      // 小图标信息
      iconImgUrl: '',
      iconWidth: '',
      // 存储每个小图标处理好的宽高
      iconHeight: '',
      arrIcon: [],
      iconMaxWidth: 32,
      iconMaxHeight: 32,
      tog: 1
    }
  },
  watch: {
    picpath() {
      this.imgvalue = this.picpath
      return
    },
    equipment() {
      if (this.equipment.length !== 0) {
        this.arrIcon = []
        let finish = true
        this.equipment.filter((item) => {
          if (!item.iconImgUrl) {
            finish = false
          }
          return true
        })
        console.log('finish', finish)
        if (finish) {
          this.equipment.filter((item, index) => {
            if (index >= this.imgIndex) {
              this.getImgInfo(
                this.$baseUrl + item.iconImgUrl,
                this.iconMaxWidth,
                this.iconMaxHeight,
                'iconWidth',
                'iconHeight',
                true,
                'arrIcon'
              )
            }
            return true
          })
        }
      }
    }
  },
  destroyed() {
    clearInterval(this.timer)
  },
  created() {
    this.getImgInfo(
      this.imgvalue,
      this.bigMaxWidth,
      this.bigMaxHeight,
      'width',
      'height'
    )
    // if (this.equipment.length !== 0) {
    //   this.arrIcon = []
    //   let finish = true
    //   this.equipment.filter((item) => {
    //     if (!item.iconImgUrl) {
    //       finish = false
    //     }
    //     return true
    //   })
    //   if (finish) {
    //     this.equipment.filter((item, index) => {
    //       if (index >= this.imgIndex) {
    //         this.getImgInfo(
    //           this.$baseUrl + item.iconImgUrl,
    //           this.iconMaxWidth,
    //           this.iconMaxHeight,
    //           'iconWidth',
    //           'iconHeight',
    //           true,
    //           'arrIcon'
    //         )
    //       }
    //       return true
    //     })
    //   }
    // }

    // this.iconImgUrl = JSON.parse(
    //   JSON.stringify(this.$baseUrl + this.equipment[0].iconImgUrl)
    // )
  },
  methods: {
    // 获取图片大小
    // ,objWidth,objHeight
    getImgInfo(
      imgvalue,
      MaxWidth,
      MaxHeight,
      StrWidth,
      StrHeight,
      Array = false,
      arr,
      num = 0
    ) {
      // console.log("objWidthName", this[StrWidth], this[StrHeight]);
      var img = new Image()

      img.src = imgvalue
      // const vm = this;
      const _this = this
      // img.onerror = () => {
      //   _this.imgOnerror = true
      //   _this.imgIndex =
      //     _this.arrIcon.length - 1 < 0 ? 0 : _this.arrIcon.length - 1
      //   this.timer = setTimeout(() => {
      //     if (num <= 5) {
      //       _this.getImgInfo(
      //         imgvalue,
      //         MaxWidth,
      //         MaxHeight,
      //         StrWidth,
      //         StrHeight,
      //         Array,
      //         arr,
      //         num + 1
      //       )
      //     }
      //     clearInterval(this.timer)
      //   }, 2000)
      // }
      // img.onload = function(e) {
      //   //  显示时 初始 最大宽度
      //   const maxWidth = MaxWidth
      //   //  显示时 初始 最大高度
      //   const maxHeight = MaxHeight
      //   if (
      //     e.path[0].naturalWidth <= maxWidth &&
      //     e.path[0].naturalHeight <= maxHeight
      //   ) {
      //     _this[StrWidth] = e.path[0].naturalWidth + 'px'
      //     _this[StrHeight] = e.path[0].naturalHeight + 'px'
      //   } else {
      //     _this[StrWidth] = e.path[0].naturalWidth + 'px'
      //     _this[StrHeight] = e.path[0].naturalHeight + 'px'
      //     if (
      //       e.path[0].naturalWidth > maxWidth &&
      //       e.path[0].naturalHeight <= maxHeight
      //     ) {
      //       const ratio = e.path[0].naturalWidth / e.path[0].naturalHeight
      //       _this[StrWidth] = '1600px'
      //       _this[StrHeight] = maxWidth / ratio + 'px'
      //     } else if (
      //       e.path[0].naturalWidth <= maxWidth &&
      //       e.path[0].naturalHeight > maxHeight
      //     ) {
      //       const ratio = e.path[0].naturalWidth / e.path[0].naturalHeight
      //       _this[StrWidth] = maxHeight * ratio + 'px'
      //       _this[StrHeight] = '800px'
      //     } else if (
      //       e.path[0].naturalWidth > maxWidth &&
      //       e.path[0].naturalHeight > maxHeight
      //     ) {
      //       const ratio = e.path[0].naturalWidth / e.path[0].naturalHeight
      //       let w = maxWidth
      //       let h = w / ratio
      //       if (h > maxHeight) {
      //         const ratio2 = w / h
      //         h = maxHeight
      //         w = h * ratio2
      //       }
      //       _this[StrWidth] = w + 'px'
      //       _this[StrHeight] = h + 'px'
      //     }
      //   }
      //   if (Array) {
      //     _this[arr].push({
      //       iconWidth: _this[StrWidth],
      //       iconHeight: _this[StrHeight]
      //     })
      //   }
      // }
      _this[StrWidth] = '100%'
      _this[StrHeight] = '100%'
      var that = this
      this.$nextTick(_ => {
        _this[StrHeight] = that.$refs.bigImage.clientHeight + 'px'
        _this[StrWidth] = that.$refs.bigImage.clientWidth + 'px'
      })
    },
    // 缩放
    rollImg() {
      // var oImg = document.getElementsByClassName("movableItem")[0];
      var oImg = this.$refs.bigImage
      var _this = this
      function fnWheel(obj, fncc) {
        obj.onmousewheel = fn
        if (obj.addEventListener) {
          obj.addEventListener('DOMMouseScroll', fn, false)
        }
        function fn(ev) {
          var oEvent = ev || window.event
          var down = true
          if (oEvent.detail) {
            down = oEvent.detail > 0
          } else {
            down = oEvent.wheelDelta < 0
          }
          if (fncc) {
            fncc.call(this, down, oEvent)
          }
          if (oEvent.preventDefault) {
            oEvent.preventDefault()
          }
          return false
        }
      }
      fnWheel(oImg, function(down, oEvent) {
        var oldWidth = this.offsetWidth
        var oldHeight = this.offsetHeight
        var oldLeft = this.offsetLeft
        var oldTop = this.offsetTop
        var parent = oEvent.path[2]
        // 获取父元素距离页面可视区域的位置
        var parentLeft = parent.getBoundingClientRect().left
        var parentTop = parent.getBoundingClientRect().top
        // 比例 = （点击位置距离可视窗口位置 - 父元素距离可视窗口位置 - 相对定位的left）/ 本身宽度
        var scaleX = (oEvent.clientX - parentLeft - oldLeft) / oldWidth // 比例
        var scaleY = (oEvent.clientY - parentTop - oldTop) / oldHeight

        const nowWidth = this.style.width.split('p')[0]
        const initWidth = _this.width.split('p')[0]
        const initHeight = _this.height.split('p')[0]

        let miniFlag = true
        let magniFlag = true
        if (_this.minification) {
          // 限制缩小范围
          if (nowWidth <= (parseInt(initWidth / _this.minification) || 50)) {
            miniFlag = false
            this.style.width = (parseInt(initWidth / _this.minification) || 50) + 'px'
            this.style.height =
              (parseInt(initHeight / _this.minification) || 50) + 'px'
          }
          if (_this.magnification) {
            // 限制放大范围
            if (nowWidth >= parseInt(initWidth * _this.magnification)) {
              magniFlag = false
              this.style.width =
                parseInt(initWidth * _this.magnification) + 'px'
              this.style.height =
                parseInt(initHeight * _this.magnification) + 'px'
            }
          }
        }

        if (down && miniFlag) {
          this.style.width = parseInt(this.offsetWidth * 0.9) + 'px'
          this.style.height = parseInt(this.offsetHeight * 0.9) + 'px'
        } else if (!down && magniFlag) {
          this.style.width = parseInt(this.offsetWidth * 1.1) + 'px'
          this.style.height = parseInt(this.offsetHeight * 1.1) + 'px'
        }
        var newWidth = this.offsetWidth
        var newHeight = this.offsetHeight

        // 新的相对位置left = 原先的相对位置left - 比例 *（本身新的宽度-旧的宽度）
        this.style.left =
          Math.round(this.offsetLeft - scaleX * (newWidth - oldWidth)) + 'px'
        this.style.top =
          Math.round(this.offsetTop - scaleY * (newHeight - oldHeight)) + 'px'
      })
    },
    // },
    // 拖拽
    drag(ev) {
      // var ie = document.all;
      var nn6 = document.getElementById && !document.all
      var isdrag = false
      var y, x
      var nTY, nTX
      var oDragObj
      function moveMouse(e) {
        console.log('oDragObj.style.top1', oDragObj.style.top)
        if (isdrag) {
          oDragObj.style.top =
            (nn6 ? nTY + e.clientY - y : nTY + event.clientY - y) + 'px'
          oDragObj.style.left =
            (nn6 ? nTX + e.clientX - x : nTX + event.clientX - x) + 'px'
          // console.log("oDragObj.style.top2", oDragObj.style.top);
          // console.log(`nTY+e.clientY-y=${nTY}+${e.clientY}-${y}`);
          // console.log(`nTY+e.clientY-y=${nTY + e.clientY - y}`);

          return false
        }
      }
      function initDrag(e) {
        // console.log("点击图片initDrag");
        var oDragHandle = nn6 ? e.target : event.srcElement
        var topElement = 'HTML'
        while (
          oDragHandle.tagName !== topElement &&
          oDragHandle.className !== 'movableItem'
        ) {
          oDragHandle = nn6
            ? oDragHandle.parentNode
            : oDragHandle.parentElement
        }
        if (oDragHandle.className === 'movableItem') {
          isdrag = true
          oDragObj = oDragHandle
          // 父元素宽高
          const width = e.path[2].offsetWidth
          const height = e.path[2].offsetHeight
          // console.log(width, height);
          // console.log(oDragObj.style);
          // 这里判断第一次获取不到style 样式 默认为 居中50%
          if (oDragObj.style.top === '') {
            // console.log(
            //   '进入了oDragObj.style.top.indexOf("%")',
            //   oDragObj.style.top
            // );
            nTY = parseInt((50 * height) / 100 + 0)
            nTX = parseInt((50 * width) / 100 + 0)
          } else {
            nTY = parseInt(oDragObj.style.top + 0)
            nTX = parseInt(oDragObj.style.left + 0)
          }
          y = nn6 ? e.clientY : event.clientY
          x = nn6 ? e.clientX : event.clientX
          oDragObj.style.cursor = 'move'
          document.onmousemove = moveMouse
          return false
        }
      }
      document.onmousemove = initDrag
      // document.onmouseup = new Function("isdrag=false");
      document.onmouseup = function(e) {
        isdrag = false
        document.onmousemove = null
        document.onmouseup = null
        var oDragHandle = nn6 ? e.target : event.srcElement
        var topElement = 'HTML'
        while (
          oDragHandle.tagName !== topElement &&
          oDragHandle.className !== 'movableItem'
        ) {
          oDragHandle = nn6
            ? oDragHandle.parentNode
            : oDragHandle.parentElement
        }
        if (oDragHandle.className === 'movableItem') {
          oDragObj = oDragHandle
          oDragObj.style.cursor = 'Default'
        }
      }
      ev = event || window.event
    },
    // 拖拽标记
    // eslint-disable-next-line no-unused-vars
    dragSign(ev, key) {
      var nn6 = document.getElementById && !document.all
      var isdrag = false
      var y, x
      var nTY, nTX
      var oDragObj
      const _this = this
      function moveMouse(e) {
        if (isdrag) {
          this.equipmentKey = key
          // console.log("thisequipmentKey", this.equipmentKey);

          const widthItem = e.path[1].style.width.split('p')
          const heightItem = e.path[1].style.height.split('p')
          const width = widthItem[0]
          // eslint-disable-next-line no-unused-vars
          const height = heightItem[0]
          // console.log("oDragObj.style.top2", oDragObj.style.top);
          const top =
            ((nn6
              ? (nTY / 100) * height + e.clientY - y
              : (nTY / 100) * height + event.clientY - y) /
              height) *
            100
          const left =
            ((nn6
              ? (nTX / 100) * width + e.clientX - x
              : (nTX / 100) * width + event.clientX - x) /
              width) *
            100

          if (top >= 0 && top <= 100) {
            _this.equipment[key].top = top
          }
          if (left >= 0 && left <= 100) {
            _this.equipment[key].left = left
          }

          return false
        }
      }
      // eslint-disable-next-line no-unused-vars
      function initDrag(e) {
        // console.log("_this", _this);
        var oDragHandle = nn6 ? e.target : event.srcElement
        var topElement = 'HTML'
        while (
          oDragHandle.tagName !== topElement &&
          oDragHandle.className.indexOf('equipment') === -1
        ) {
          oDragHandle = nn6
            ? oDragHandle.parentNode
            : oDragHandle.parentElement
        }
        if (oDragHandle.className.indexOf('equipment') !== -1) {
          isdrag = true
          oDragObj = oDragHandle
          // 父元素宽高
          const width = e.path[1].offsetWidth
          const height = e.path[1].offsetHeight
          // 这里判断第一次获取不到style 样式 默认为 居中50%
          if (oDragObj.style.top === '') {
            nTY = parseInt((50 * height) / 100 + 0)
            nTX = parseInt((50 * width) / 100 + 0)
          } else if (oDragObj.style.top.indexOf('%') !== -1) {
            nTY = oDragObj.style.top.split('%')[0]
            nTX = oDragObj.style.left.split('%')[0]
          } else {
            nTY = parseInt(oDragObj.style.top + 0)
            nTX = parseInt(oDragObj.style.left + 0)
          }
          y = nn6 ? e.clientY : event.clientY
          x = nn6 ? e.clientX : event.clientX

          oDragObj.style.cursor = 'move'
          document.onmousemove = moveMouse
          return false
        }
      }

      // document.onmousedown = initDrag;
      document.onmousemove = initDrag

      document.onmouseup = function(e) {
        isdrag = false
        document.onmousemove = null
        document.onmouseup = null
        var oDragHandle = nn6 ? e.target : event.srcElement
        var topElement = 'HTML'
        while (
          oDragHandle.tagName !== topElement &&
          oDragHandle.className !== 'equipment'
        ) {
          oDragHandle = nn6
            ? oDragHandle.parentNode
            : oDragHandle.parentElement
        }
        if (oDragHandle.className === 'equipment') {
          oDragObj = oDragHandle
          oDragObj.style.cursor = 'Default'
        }
      }

      ev = event || window.event

      // 取消事件冒泡行为
      window.event ? (window.event.cancelBubble = true) : ev.stopPropagation()
    }
  }
}
</script>
<style lang="scss" scoped>
.pop-up-main {
  width: 100%;
  height: 100%;
  background: rgb(233, 233, 233);
  .paln-box {
    width: 100%;
    height: 100%;
    position: relative;

    .movableItem {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      img {
        z-index: 1;
        width: 100%;
        height: 100%;
      }

      .equipment {
        position: absolute;
        top: 0;
        left: 0;
        transform: translate(-50%, -50%);
        z-index: 2;
        font-size: 40px;
        // color: red;
        // background: blue;
        zoom: 1;
      }
    }
  }
}
</style>
